<template>
  <div class="vue-root">
  <v-loadding :time="300">
  <swiper :options="swiperOption" >
    <swiper-slide v-for="slide in swiperSlides"><img :src="baseUrl+slide.img"></swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  <keep-alive>
	<v-shopcategory :shopcategorys="shopcategorys"></v-shopcategory>
  </keep-alive>
	<div class="line"></div>
	<v-ad :ad="ad"></v-ad>
	
	<ul class="aui-list aui-media-list">
            <li class="aui-list-header">
                推荐店铺
            </li>
            <li class="aui-list-item" v-for="item in shops">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media">
                        <img :src="baseUrl+item.logo">
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title">{{item.name}}</div>
                            <div class="aui-list-item-right">08:00</div>
                        </div>
                        <div class="aui-list-item-text">
                            {{item.desc}}
                        </div>
                        <div class="aui-info aui-margin-t-5" style="padding:0">
                            <div class="aui-info-item">
                                <span class="aui-margin-l-5">{{item.address}}</span>
                                </div>
                            <div class="aui-info-item">月售：{{item.month_sales}}</div>
                        </div>
                    </div>
                </div>
            </li>
           
        </ul>
	<div style="height:50px;"></div>
	<div class="aui-toast" style="display: block; margin-top: -61px;" v-show="loadding"><div class="aui-toast-loading"></div><div class="aui-toast-content">加载中</div></div>
  </v-loadding>
  </div>
</template>

<script>
import mylazy from 'components/common/loading';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import recommended from 'components/home/recommended';
import shopcategory from 'components/home/shopcategory';
import ad from 'components/home/ad';
import Config from 'components/config';
export default {
  name: 'hello',
  data () {
    return {
      swiperOption: {
        autoplay: 3500,
        setWrapperSize :true,
        pagination : '.swiper-pagination',
        paginationClickable :true,
        mousewheelControl : true,
        observeParents:true,
      },
      swiperSlides: [],
      baseUrl:'',
      recommended:[],
      shopcategorys:[],
      ad:{},
      loadding:true,
      page:1,
      shops:[],
      isloadMore:true
    }
  },
  components: {
    'v-loadding': mylazy,
    swiper,
    swiperSlide,
    'v-recommended': recommended,
    'v-shopcategory': shopcategory,
    'v-ad': ad
  },
  created(){
    console.log("created");
  	
  },
  mounted() {
   	console.log("mounted");
    this.baseUrl=Config.data().url;
    this.getData();
    this.getShops();
    let _this=this;
    window.addEventListener('scroll', function () {
      if(document.body.scrollTop + window.innerHeight >= document.body.clientHeight) {
        _this.getShops();
      }
    });
  },
  methods:{
  	getData:function(){
  		this.$http.get(Config.data().apiUrl+"home.php").then(function(res){  
	      	this.swiperSlides=res.body.home_slider;
	      	this.shopcategorys=res.body.shopcategorys;
	      	this.loadding=false;
	      },function(res){  
	        this.loadding=false;
	    });
  	},
    getShops:function(){
      if(this.isloadMore){
        this.isloadMore=false;
        this.$http.get(Config.data().apiUrl+"shop.php?action=list&page="+this.page).then(function(res){
              this.isloadMore=true;
              if(res.body&&res.body.length==0){
                this.isloadMore=false;
              }
              for(var i in res.body){
                this.shops.push(res.body[i]);
              }
              this.page++;
            },function(res){  
              this.isloadMore=true;
          });
      }
      
    }
  }
}
</script>

